webpack入门及踩坑应对指南

webpack的使用

为什么使用webpack

1.前端需要工程化

工程化的概念： 小作坊 -> 流水线
流水线的特点：自动化，模块化、性能优化

自动化就是命令行操作，一行命令实现多个功能，例如自动监听变化，自动翻译源代码到打包代码库里面

2.文件复杂多样

1. css/js/html/img/svg 文件多
2. css-less-sass-scss-stylus
   js - coffee - es6 - typescript - babel
   html - jade - pug - slim 变化快

将各种文件集合到一起，看成一个模块，通过模块来打包，这就是webpack的优势之处。

css loader一直报错

webpack的配置堪称玄学，报错了无法找到原因，推荐你这样做，且建议不参考别人的配置，最好参考官方的配置例子，这样碰到错误还可以在github的issue上进行提问和寻找解决方法

• 你需要首先删除掉node_modules所有的内容
• 然后重新安装依赖npm install
• 都不行的话，你需要寻找readme的不同之处，例如css-loader中，不同版本加载的loader也不相同

关于webpack中loader的学习，可以参加阮一峰的文章和学习demo

css loader
github

奇技淫巧

1.全局安装VS局部安装

全局安装：npm install -g http-server，安装目录为user/local/.bin/，安装在全局目录下

局部安装：安装在局部目录下，./node_modules/.bin,需要通过文件前缀才可以访问得到

例如你想用webpack来打包代码

全局： webpack main.js bundle.js
局部： ./node_modules/.bin/webpack main.js bundle.js

此外，有个简写命令可以执行webpack命令，执行局部目录的webpack可以改成这样npx webpack

2.webpack中的关键目录

./ 当前目录
src source 未经翻译原始代码的文件夹
dist distribution 发布代码文件夹
node_modules/vendors 第三方代码文件夹

3.自动添加前缀的loader autoprefixer

4.报错提示找不到某个模块，cannt find 'module'，就安装这个模块npm install module，绝大多数情况下是有效的，当报错信息变化了说明这个解决方法是有效的，